﻿ @model IEnumerable<PrjctMngmt.Models.TeamDeveloperModel>

@{
    ViewBag.Title = "Teams";
}

<script type="text/javascript">
    $(function () {
        // there's the developers and the team
        var $developers = $(".developers"),
            $teams = $(".teams");

        // let the developers without team be draggable
        $("li", $developers).draggable({
            cancel: "a.ui-icon", // clicking an icon won't initiate dragging
            revert: "invalid", // when not dropped, the item will revert back to its initial position
            helper: "clone",
            cursor: "move"
        });

        // let the developers within teams be draggable
        $("li", $teams).draggable({
            cancel: "a.ui-icon", // clicking an icon won't initiate dragging
            revert: "invalid", // when not dropped, the item will revert back to its initial position
            helper: "clone",
            cursor: "move"
        });

        // let the team be droppable, accepting developers
        $teams.droppable({
            accept: '.developers > *, .teams > *', //allow also team to team drops
            hoverClass: "ui-state-highlight",
            drop: function (event, ui) {
                moveToTeam(ui.draggable, $(this));
            }
        });

        // let developers be droppable, accepting developers from teams
        $developers.droppable({
            accept: ".teams > li",
            hoverClass: "ui-state-highlight",
            drop: function (event, ui) {
                unbindDeveloper(ui.draggable);
            }
        });

        // add developer to team function
        var removeMember = "<a href='link/to/unbind/script/when/js/is/off' title='Unbind developer' class='devRecycle ButtonLink recycleIcon'></a>";
        function moveToTeam($item, $dropped) {
            $item.fadeOut(function () {
                if (!$item.hasOwnProperty(removeMember)) {
                    $item.find("a.recycleIcon").remove();
                    $item.append(removeMember);
                }
                $item.appendTo($dropped).fadeIn(function () { });
                $.post("/Developer/ChangeTeam?devId=" + $item.attr("id") + "&teamName=" + $dropped.attr("id"), function () { });
            });
        }

        // remove developer from the team
        function unbindDeveloper($item) {
            $item.fadeOut(function () {
                $item
					.find("a.recycleIcon").remove()
					.end()
					.appendTo($developers)
					.fadeIn();
                $.post("/Developer/ChangeTeam?devId=" + $item.attr("id") + "&teamName=", function () { });
            });
        }

        // resolve the icons behavior with event delegation
        $("ul.developers > li").click(function (event) {
            var $item = $(this),
				$target = $(event.target);
            if ($target.is("a.recycleIcon")) {
                unbindDeveloper($item);
            }
            return false;
        });

        // resolve the icons behavior with event delegation
        $(".teams > li").click(function (event) {
            var $item = $(this),
				$target = $(event.target);
            if ($target.is("a.recycleIcon")) {
                unbindDeveloper($item);
            }
            return false;
        });
    });
</script>

<script type="text/javascript">
    $(function () {
        $("#devDialog").dialog({
            autoOpen: false, width: 400, modal: true,
            buttons: {
                "Save": function () {
                    $.post("/Developer/CreateDialog",
                        $("#DeveloperForm").serialize(),
                        function () {
                            $("#devDialog").dialog("close");
                            window.location.reload();
                        });
                },
                Cancel: function () { $(this).dialog("close"); }
            }
        });
        //TODO: Fix developer details dialog
        //        $(".devDetails").click(function () {
        //            var id = $(this).parent().attr("id");
        //            $("#devDialog").html("")
        //                .dialog("option", "title", "Developer details")
        //                .load("/Developer/Details/"/* TODO: FIX*/, function () { $("#devDialog").dialog("open"); });
        //        });

        $(".devDetails").click(function () {
            var id = $(this).parent().attr("id");
            window.open("/Developer/Details/" + id);
        });
    });
</script>

<script type="text/javascript">
    $(function () {
        $("#teamDialog").dialog({
            autoOpen: false, width: 400, modal: true,
            buttons: {
                "Save": function () {
                    $.post("/Team/Create",
                        $("#TeamForm").serialize(),
                        function () {
                            $("#teamDialog").dialog("close");
                            window.location.reload();
                        });
                },
                Cancel: function () { $(this).dialog("close"); }
            }
        });
        $("#addTeam").click(function () {
            $("#teamDialog").html("")
                .dialog("option", "title", "Create team")
                .load("/Team/Create", function () { $("#teamDialog").dialog("open"); });
        });
        //TODO: Fix team details dialog
//        $(".teamDetails").click(function () {
//            var name = $(this).parent().attr("id");
//            $("#teamDialog").html("")
//                .dialog("option", "title", "Team details")
//                .load("/Team/Details?name="/*TODO: FIX*/, function () { $("#teamDialog").dialog("open"); });
//        });
    });
</script>

<script type="text/javascript">
    $(document).ready(function () {

        $("#confirmTeamDelete").dialog({
            modal: true,
            autoOpen: false
        });

        $(".removeTeam").click(function (e) {
            e.preventDefault();
            var id = $(this).parent().parent().attr("id");
            var url = '@Url.Action("Delete", "Team", new { TeamName = "team" })';
            url = url.replace("team", id);

            $("#confirmTeamDelete").dialog('option', 'buttons', {
                "Confirm": function () {
                    $.post(url,
                            null,
                            function (data) {
                                window.location.reload();
                            }
                    );
                },
                "Cancel": function () {
                    $(this).dialog("close");
                }
            });

            $("#confirmTeamDelete").dialog("open");
        });
    });
</script>

<div class="ui-helper-clearfix">
    <b>Developers</b>
    <ul class="developers">
        @foreach (var item in Model)
        {
            foreach (var dev in item.developers)
            {
                if (dev.TeamName == null || dev.TeamName=="")
                {
                    <li id="@dev.DeveloperID" class="ui-widget-content ui-corner-tr devLi">
                        @dev.FirstName @dev.LastName
                        <img alt="Details" title="Details" class="devDetails ButtonLink detailIcon"
                            src="../../Content/themes/base/images/mag_glass.png" />
                    </li>
                }
            }
        }
        <!-- placement hack --><img alt="." src="../../Content/themes/base/images/transparent_dot.png"
            height="30px"/>
    </ul>
    <br />
    <b>Teams</b>
    <br /><br />
    <img alt="Create team" id="addTeam" class="ButtonLink" style="float:left;"
        src="../../Content/themes/base/images/plus-sign_small.png" />
    <br />
    @foreach (var item in Model)
    {
        foreach (var team in item.teams)
        {
            <div id="@team.TeamName" class="teams">
                <div class="teamTitle ui-widget-header">
                    @team.TeamName
                    <img alt="Remove" title="Remove" class="removeTeam ButtonLink removeIcon"
                        src="../../Content/themes/base/images/remove-icon.png" />
                    <a href='@Url.Action("Details", "Team", new { TeamName = team.TeamName })'>
                        <img alt="Details" title="Details" class="teamDetails ButtonLink detailIcon"
                            src="../../Content/themes/base/images/mag_glass.png" />
                    </a>
                </div>
                @foreach (var dev in item.developers)
                {
                    if (dev.TeamName == team.TeamName)
                    {
                        <li id="@dev.DeveloperID" class="ui-widget-content ui-corner-tr devLi">
                            @dev.FirstName @dev.LastName
                            <a href='@Url.Action("Details", "Developer", new { id = dev.DeveloperID })'>
                                <img alt="Details" title="Details" class="devDetails ButtonLink detailIcon"
                                    src="../../Content/themes/base/images/mag_glass.png" />
                            </a>
                            <a href='link/to/unbind/script/when/js/is/off' title='Unbind developer'
                                class='devRecycle ButtonLink recycleIcon'></a>
                        </li>
                    }
                }
            </div>
        }
    }
</div>
<div id="devDialog"></div>
<div id="teamDialog"></div>
<div id="confirmTeamDelete" title="Confirmation">
	<p>
        <span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>
        Are you sure you want to delete this team?
    </p>
</div>